
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title id="menu_manager">日志信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/layuimini.css" media="all">
    <link rel="stylesheet" href="../../static/css/themes/default.css" media="all">
    <link rel="stylesheet" href="../../static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../static/css/public.css" media="all">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
</head>
<body>
    <div class="layuimini-container layuimini-main">
        <div class="layui-row">
            <div class="layui-col-md12">
                <!-- 标题 -->
                <h1 style="text-align: center;margin-bottom: 1%">实时日志</h1>
            </div>
        </div>
        <div class="layui-row" style="margin: 0% 1%">
            <div class="layui-col-md12">
                <!-- 显示区 -->
                <div id="log-container" style="height: 650px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
                    <div></div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin: 1% 0%">
            <div class="layui-col-md12" style="text-align: center;">
                <!-- 操作栏 -->
                    <button onclick="$('#log-container div').text('');" class="layui-btn layui-btn-danger">清屏</button>
                    <button onclick="$('#log-container').animate({scrollTop:$('#log-container')[0].scrollHeight});"
                            class="layui-btn layui-btn-normal">滚动至底部
                    </button>
                    <button id="AutoScroll" class="layui-btn layui-btn-warm">关闭自动滚动
                    </button>
            </div>
        </div>

    </div>
</div>
</body>
<script src="../../static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../static/module/common.js" ></script>
<script>
    layui.use(['jquery'], function () {
        let $ = layui.jquery;
        var autoFlag = true;
        $(document).ready(function() {
            var websocket = new WebSocket('ws://localhost:8081/websocket/logging');
            //连接发生错误的回调方法
            websocket.onerror = function (e) {
                console.error("WebSocket连接发生错误");
            };

            //连接成功建立的回调方法
            websocket.onopen = function () {
                console.log("WebSocket连接成功")
            };
            //接收到消息的回调方法
            websocket.onmessage = function(event) {
                $("#log-container div").append(event.data);
                if (autoFlag){
                    $("#log-container").scrollTop($("#log-container")[0].scrollHeight);
                }
            };
            $("#AutoScroll").click(function () {
                autoFlag = !autoFlag;
                if (autoFlag){
                    $("#AutoScroll").text("关闭自动滚动");
                    $("#AutoScroll").removeClass();
                    $("#AutoScroll").addClass("layui-btn layui-btn-warm");
                }else if (!autoFlag){
                    $("#AutoScroll").text("开启自动滚动");
                    $("#AutoScroll").removeClass();
                    $("#AutoScroll").addClass("layui-btn layui-btn-primary layui-border-orange");
                    $("#AutoScroll").css("border-color","#FFB800");
                    // $("#AutoScroll").css("border-color","#FFB800");
                }
            });
            //连接关闭的回调方法
            websocket.onclose = function () {
                console.log("WebSocket连接关闭")
            };

            //是否开启自动底部
            // function ContainerScroll(event){
            //     //滚动条自动到最底部
            //     $("#log-container").scrollTop($("#log-container")[0].scrollHeight);
            // }
            //

        });

    });
</script>
</body>
</html>
